<template>
	<view>
		<view class="lc-white">
			<view class="lc-box" >
				<view>券类型</view>
				<picker :range="type_list" @change="typeChange">
					<view class="">{{type_list[type_index]}}</view>
				</picker>
			</view>
			
			<view class="lc-box" >
				<view>标题</view>
				<input type="text" placeholder="请输入" v-model="list.name" />
			</view>
			
			<view class="lc-box" >
				<view>发放总数量</view>
				<input type="number" placeholder="请输入 (-1则不限制)" v-model="list.grant" />
			</view>
			
			<view class="lc-box" >
				<view>减免金额</view>
				<input type="number" placeholder="请输入" v-model="list.price" />
			</view>
			
			<view class="lc-box" >
				<view>最低消费金额</view>
				<input type="number" placeholder="请输入" v-model="list.limit" />
			</view>
			
			
			
			<view class="lc-box" >
				<view>可用范围</view>
				<picker :range="range_list" @change="rangeChange">
					<view class="">{{range_list[range_index]}}</view>
				</picker>
			</view>
			
			<view class="lc-box" v-if="range_index==1">
				<view>指定商品</view>
				<picker :range="goods_list" @change="goodsChange">
					<view class="">{{goods_list[goods_index]}}</view>
				</picker>
			</view>
			
			<view class="lc-box" >
				<view>到期类型</view>
				<picker :range="pretype_list" @change="pretypeChange">
					<view class="">{{pretype_list[pretype_index]}}</view>
				</picker>
			</view>
			
			<view class="lc-box" v-if="pretype_index==0">
				<view>领取后有效天数</view>
				<input type="number" placeholder="请输入" v-model="list.validity" />
			</view>
			
			<view class="lc-box" v-if="pretype_index==1">
				<view>开始日期</view>
				<input type="date" placeholder="请输入" v-model="list.startdate" />
			</view>
			
			<view class="lc-box" v-if="pretype_index==1">
				<view>结束日期</view>
				<input type="date" placeholder="请输入" v-model="list.enddate" />
			</view>
			
			<view class="lc-box" >
				<view>领取限制张数</view>
				<input type="number" placeholder="请输入 设置为0则不限" v-model="list.drawlimit" />
			</view>
			
			<view class="lc-con" >
				<view class="lc-title">使用说明</view>
				<view class="lc-detail">
					<textarea name="" placeholder="请输入" maxlength="300" v-model="list.content"></textarea>
					<view v-if="list.content">{{list.content.length}}/300</view>
				</view>
			</view>
			
			
			<view class="lc-big"></view>
			<view class="lc-add" @click="save" v-if="id==''">添加</view>
			<view class="lc-add" @click="save" v-if="id!=''">编辑</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				app: getApp().globalData,
				baseurl: getApp().globalData.baseurl,
				shop_id:'',
				id:'',
				list:{},
				type_list:['满减券'],
				type_index:0,
				range_list:['全部商品','指定商品'],
				range_index:0,
				goods_list:[],
				goods_list_id:[],
				goods_index:0,
				pretype_list:['领取后到期天数','固定到期时间'],
				pretype_index:0
			}
		},
		onLoad(e) {
			if(e.shop_id){
				this.shop_id = e.shop_id
			}
			if(e.id){
				this.id = e.id
				this.coupon_find(this.id)
			}else{
				this.coupon_goods_list(this.shop_id)
			}
		},
		methods:{
			typeChange(e){
				console.log(e)
			},
			rangeChange(e){
				this.range_index = e.detail.value
			},
			goodsChange(e){
				this.goods_index = e.detail.value
			},
			pretypeChange(e){
				this.pretype_index = e.detail.value
			},
			coupon_goods_list(shop_id){
				var that = this
				that.app.post('/api/project/coupon_goods_list', {
					shop_id:shop_id
				}).then(res => {
					that.list = res.list
					var goods_list = []
					var goods_list_id = []
					for(var i=0;i<that.list.length;i++){
						goods_list.push(that.list[i]['title'])
						goods_list_id.push(that.list[i]['id'])
					}
					that.goods_list = goods_list
					that.goods_list_id = goods_list_id
				})
			},
			coupon_find(id){
				var that = this
				that.app.post('/api/project/coupon_find', {
					id: id
				}).then(res => {
					that.list = res.list
					var goods_list = []
					var goods_list_id = []
					for(var i=0;i<that.list.goods_list.length;i++){
						goods_list.push(that.list.goods_list[i]['title'])
						goods_list_id.push(that.list.goods_list[i]['id'])
						
						if(that.list.goods_list[i]['id']==that.list.range){
							that.goods_index = i
						}
						
					}
					that.goods_list = goods_list
					that.goods_list_id = goods_list_id
					
					if(that.list.rangetype=='all'){
						that.range_index = 0
					}else{
						that.range_index = 1
					}
					
					if(that.list.pretype=='appoint'){
						that.pretype_index = 0
					}else{
						that.pretype_index = 1
					}
					
					
				})
			},
			save(){
				var that = this
				if(that.range_index==0){
					var rangetype = 'all'
					var range = ''
				}else{
					var rangetype = 'goods'
					var range = that.goods_list_id[that.goods_index]
				}
				if(that.pretype_index==0){
					var pretype = 'appoint'
				}else{
					var pretype = 'fixed'
				}
				
				that.app.post('/api/project/coupon_save', {
					id: that.id,
					shop_id:that.shop_id,
					name:that.list.name,
					grant:that.list.grant,
					price:that.list.price,
					limit:that.list.limit,
					rangetype:rangetype,
					range:range,
					pretype:pretype,
					validity:that.list.validity,
					startdate:that.list.startdate,
					enddate:that.list.enddate,
					drawlimit:that.list.drawlimit,
					content:that.list.content
				}).then(res => {
					uni.showToast({
						title: '操作成功',
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				})
			}
		},
	}
</script>

<style lang="scss">
	.lc-white {
		width: 690rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		border-radius: 16rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
	
		.lc-img {
			width: 630rpx;
			height: 136rpx;
			border-bottom: 1px solid #eee;
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			view {
				font-size: 30rpx;
				color: #333333;
			}
	
			image {
				width: 96rpx;
				height: 96rpx;
			}
		}
	
		.lc-box {
			width: 630rpx;
			height: 104rpx;
			border-bottom: 1px solid #eee;
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			.sex {
				display: flex;
				align-items: center;
	
				.sex-box {
					display: flex;
					align-items: center;
					margin-left: 40rpx;
	
					image {
						width: 30rpx;
						height: 30rpx;
					}
	
					view {
						font-size: 30rpx;
						color: #333333;
						margin-left: 12rpx;
					}
				}
	
	
			}
	
			view {
				font-size: 30rpx;
				color: #333333;
			}
	
			input {
				font-size: 30rpx;
				color: #333333;
				text-align: right;
			}
		}
	}
	
	.lc-con {
		width: 690rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 0rpx;
		margin-left: 0rpx;
		padding-bottom: 30rpx;
	
		.lc-title {
			margin-left: 30rpx;
			font-size: 30rpx;
			color: #333333;
			line-height: 106rpx;
		}
	
		.money-more {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
	
			view {
				width: 190rpx;
				height: 80rpx;
				background-color: #f7f7f7;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 30rpx;
				margin-bottom: 30rpx;
			}
	
			.selects {
				background-color: #84BD00;
				color: #FFFFFF;
			}
		}
	
		.lc-detail {
			width: 630rpx;
			margin-left: 30rpx;
			background-color: #FAFAFA;
			border-radius: 16rpx;
			padding: 30rpx 0;
	
			textarea {
				font-size: 30rpx;
				width: 570rpx;
				height: 180rpx;
				margin-left: 30rpx;
			}
	
			view {
				text-align: right;
				font-size: 24rpx;
				color: #999999;
				margin-right: 30rpx;
			}
		}
	
		.lc-imgs {
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
	
			image {
				width: 172rpx;
				height: 172rpx;
				border-radius: 10rpx;
				margin-right: 26rpx;
			}
		}
	}
	
	.lc-add {
		width: 690rpx;
		height: 82rpx;
		background-color: #84BD00;
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;
		border-radius: 16rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 699;
	}
</style>